<template>
  <div class="bar-chart" ref="barChartRef"></div>
</template>

<script lang="ts">
export default {
  name: 'BarChart',
}
</script>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const barChartRef = ref()
onMounted(() => {
  const myChart = echarts.init(barChartRef.value)
  const option = {
    grid: {
      top: 0,
      bottom: 10,
      left: 0,
      right: 0,
    },
    tooltip: {
      trigger: 'axis',
    },

    xAxis: {
      type: 'category',
      show: false,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    yAxis: {
      show: false,
    },
    series: {
      type: 'bar',
      data: [23, 25, 12, 67, 35, 34, 67, 12, 54, 52, 76, 23],
      barWidth: 15,
      color: 'skyblue',
    },
  }
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<style scoped>
.bar-chart {
  width: 100%;
  height: 100%;
}
</style>
